<template>
	<view class="head-box-box">
		<!-- logo+链接 -->
		<view class="head-box">
			<view class="logo">
				<image src="../static/logo-v3.png" mode="widthFix" class="logo-pic"></image>
			</view>
			<view class="icon-box">
				<view class="iconfont erweima">&#xe63f;
				<view class="erweimapic">
					<image src="../static/weixin.jpg" mode="widthFix" >
				</view>
				</view>
				<view class="iconfont erweima">&#xe608;
				<view class="erweimapic">
					<image src="../static/weibo.jpg" mode="widthFix" >
				</view>
				</view>
				<view class="iconfont erweima">&#xe69a;
				<view class="erweimapic">
					<image src="../static/zhihu.jpg" mode="widthFix" >
				</view>
				</view>
				<view class="iconfont"><a href="mailto:info@oxfordinternational.com" style="color: #fff;text-decoration: none;">&#xe63e;</a></view>
			</view>
			<view class="menu" @click="menuIsShow">
				<view class="iconfont">
					&#xe605;
				</view>
			</view>
			
			
			
		</view>
		<!-- 移动端菜单 -->
		<view class="banner-mobile" v-if="menuShow">
				<view v-for="(i,index) in menu" :key="index" :class="index==current1?'active':''" class="item">
					<view class="sanjiao" v-if="i.children"></view>
					<view class="daohang-title" @click="home(i.name)">
				
						<text>{{i.name}}</text>
						<view class="iconfont dingwei" v-if="i.children">&#xe638;</view>
					</view>
				
				
					<view class="caidan" v-if="i.children">
						<view v-for="(m,index1) in i.childrenMenu" :key="index1" :class="index==current1?index1==current2?'active':'':''"
						 @click="menuBtn(index,index1,m.link)">{{m.name}}</view>
					</view>
				</view>
			</view>
		
	</view>
	
</template>

<script>
	export default {
		data(){
			return {
				menuShow:false,
				current1:0,
				current2:0,
				menu: [{
						name: '首页',
						children: false,
						link: 'home',
						childrenMenu: [{
							name: '子菜单1',
							link: 'zicaidan1'
						}]
					},
					/* {
						name: '私立中学',
						children: true,
						link: 'yemian1',
						childrenMenu: [{
								name: '牛津德欧中学',
								link: '/pages/dvb/dvb'
							},
							{
								name: '牛津国际高中',
								link: '/pages/oic/oic'
							},
							{
								name: '牛津学院',
								link: '/pages/oxsfc/oxsfc'
							}
						]
					}, */
					{
						name: '合作大学',
						children: true,
						link: 'yemian2',
						childrenMenu: [{
								name: '班戈大学',
								link: '/pages/bangor/bangor'
							},
							{
								name: '邓迪大学',
								link: '/pages/dundee/dundee'
							},
							{
								name: '德蒙福特大学',
								link: '/pages/montfort/montfort'
							},
							{
								name: '格林威治大学',
								link: '/pages/greenwich/greenwich'
							},
							{
								name: '雅各布大学',
								link: '/pages/Jacobs/Jacobs'
							},
							{
								name: '布拉德福德大学',
								link: '/pages/bradford/bradford'
							},
							{
								name: '在线英语先修课程',
								link: '/pages/online-pre-sessional-english-course/online-pre-sessional-english-course'
							},
							/*{
							  name:'与学生大使交流',
							  link:'/yemian2/zicaidan3-3'
							},*/
							{
								name: '申请',
								link: '/pages/application/application'
							}
						]
					},
					{
						name: '关于我们',
						children: true,
						link: 'yemian1',
						childrenMenu: [
							/*{
							  name:'介绍',
							  link:'agents'
							},*/
							{
								name: '核心价值观',
								link: '/pages/corevalue/corevalue'
							},
							{
								name: '隐私条款',
								link: '/pages/policy/policy'
							}
						]
					},
					{
						name: '代理服务',
						children: true,
						link: 'yemian1',
						childrenMenu: [{
								name: '介绍',
								link: '/pages/agents/agents'
							},
							{
								name: '资料下载',
								link: '/pages/download/download'
							},
							/*{
							  name:'联系合作',
							  link:'pwu'
							}*/
						]
					},
				]
			}
		},
		methods:{
			menuIsShow(){
				this.menuShow = !this.menuShow
			},
			home(txt) {
				if (txt == '首页') {
					uni.navigateTo({
						url: '/pages/index/index'
					})
					this.current1 = 0
					this.current2 = 0
					this.menuShow = false
				}
			},
			menuBtn(a1, a2, link) {
				console.log(link)
				console.log(a1)
				console.log(a2)
				this.current1 = a1
				this.current2 = a2
				uni.navigateTo({
					url: link
				})
				this.menuShow = false
			},
		}
	}
</script>

<style scoped lang="scss">
	.head-box-box{
		position: relative;
	}
	.iconfont{
	  font-family:"iconfont" !important;
	  font-size:28px;font-style:normal;
	  -webkit-font-smoothing: antialiased;
	  -webkit-text-stroke-width: 0.2px;
	  -moz-osx-font-smoothing: grayscale;}
	.head-box{
		display: flex;flex-direction: row;
		justify-content: space-between;
		align-items: center;
		// height: 100%;
		height: 92px;
		max-width: 1200px;
		margin: 0 auto;
		
	}
	.menu{
		display: none;
		color: #fff;
	}
	.logo-pic{
		width: 147px;
		height: 50px;
	}
	
	.icon-box{
		display: flex;
		justify-content: space-around;
		view{
			color: #fff;
			cursor: pointer;
			margin: 0 5px;
		}
	}
	.main-center{
    padding: 0 10px;
  }
	.banner-mobile{
		display: none;width: 100%;
			position: absolute;left: 0;
			top: 52px;
	}
	.erweima{
	  position: relative;
	}
	.erweima:hover{
	  .erweimapic{
	    display: block;
	  }
	}
	.erweimapic{
	  display: none;
	  width: 100px;
	  position: absolute;
	  bottom: -120px;
	  left: 50%;
	  transform: translateX(-50%);
	image{
		width: 100%;
	}
	}
	@media screen and ( max-width: 750px ) {
		.logo-pic{
			width: 88px;
			height: 30px;
			margin-left: 20px;
		}
		.icon-box{
			display: none;
		}
		.head-box{
			height: 52px !important;
		}
		.menu{
			display: block;
			padding-right: 20px;
		}
		.banner-mobile{
			display: flex;
			flex-direction: column;
			
			
		}
		.item{
			background: #303030;
			color: #fff;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
		}
		.caidan{
			background: #fff;
			color: #303030;
			width: 100%;
			text-align: center;
			view{
				padding: 6px 0;
				border-bottom: 1px solid #E9ECEF;
			}
		}
		.daohang-title{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			padding: 8px 0;
		}
	}
</style>
